import * as THREE from 'three';
const {LineGeometry} = require('three/examples/jsm/lines/LineGeometry.js');

// import LineGeometry from 'three/examples/jsm/lines/LineGeometry.js';
const {LineMaterial} = require('three/examples/jsm/lines/LineMaterial.js');
const {Line2} = require('three/examples/jsm/lines/Line2.js');
const model = new THREE.Group();
const lineGroup = new THREE.Group();//边界线组
const meshGroup = new THREE.Group();//区域填充组
const pillarMeshGroup = new THREE.Group();//柱子组
// const size = 1.2;
const mapHeight = 1
const loader = new THREE.FileLoader();
loader.setResponseType("json")
// 解析gdp文件数据
loader.load('',()=>{ 
})
loader.load('/china.json',(data)=>{
    data.features.forEach((area)=>{
        // coordinates数据分为单组和多组，将单组的封装为多组
        if(area.geometry.type === 'Polygon'){
            area.geometry.coordinates = [area.geometry.coordinates]
        }
        lineGroup.add(moreLine(area.geometry.coordinates,mapHeight)) 
        meshGroup.add(shapeMesh(area.geometry.coordinates,area.properties.name,area.properties.center))
    })
    // lineGroup.position.z += mapHeight + 0.01 *mapHeight
    const pathLine = curveLine()
    model.add(lineGroup,meshGroup,pillarMeshGroup,...pathLine)
})

// 批量产生轮廓线
const moreLine = (coordinates,gdpvalue)=>{
    const groupLine = new THREE.Group();
    coordinates.forEach(polygon => {
        var pointArr = []
        polygon[0].forEach((elem)=>{
            pointArr.push(elem[0],elem[1],0)
        })
        groupLine.add(oneLine(pointArr))
    });
    groupLine.position.z += gdpvalue+ 0.001*gdpvalue
    return groupLine
}
// 产生一条轮廓线
const oneLine = (pointArr)=>{
    const geometry = new THREE.BufferGeometry();
    const vertices = new Float32Array(pointArr);
    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
    const material = new THREE.LineBasicMaterial({
        color: 0x006666
    });
    const line = new THREE.LineLoop(geometry,material);
    return line;
}
// 产生多边形面
const shapeMesh = (coordinates,name,lngLat)=>{
    var heartShape = [];//轮廓形状Shape集合
    coordinates.forEach(polygon => {
        var pointArr = []
        polygon[0].forEach((elem)=>{
            pointArr.push(new THREE.Vector3(elem[0],elem[1],0))
        })
        const shape = new THREE.Shape(pointArr);
        heartShape.push(shape)
    });
    var material = new THREE.MeshLambertMaterial({
        color: 0x004444,
        // side: THREE.DoubleSide, //两面可见
    }); //材质对象
    var geometry = new THREE.ExtrudeGeometry( heartShape ,{
        depth: mapHeight, //拉伸长度
        bevelEnabled: false //无倒角
    });
    var mesh =  new THREE.Mesh( geometry, material )
    mesh.lngLat = lngLat
    mesh.name = name
    return mesh
}
// 产生一条曲线轨迹
const curveLine = () =>{
    // 84.9023, 41.748
    const arr = [
        new THREE.Vector3(113.4668, 33.8818, mapHeight + 0.1),
        new THREE.Vector3(98.5, 38, 5),
        new THREE.Vector3(84.9023, 41.748, mapHeight + 0.1)
    ]
    // 三维样条曲线
    const curve = new THREE.CatmullRomCurve3(arr);
    //曲线上获取点
    const pointsArr = curve.getPoints(100); 
    const geometry = new THREE.BufferGeometry();
    //读取坐标数据赋值给几何体顶点
    geometry.setFromPoints(pointsArr); 
    // 线材质
    const material = new THREE.LineBasicMaterial({
    color: 0x006666
    });
    // 线模型
    const line = new THREE.Line(geometry, material);
    // 从轨迹线上去10个点，从第20个开始取，生成一个飞线段
    var index = 20
    var num = 10
    var flyLineArr = pointsArr.slice(index,index+num)
    const geometry2 = new LineGeometry();
    var pointArr = []
    flyLineArr.forEach(function (v3) {
        pointArr.push(v3.x, v3.y, v3.z)
      })
    geometry2.setPositions(pointArr);
    const colorArr = []
    const color1 = new THREE.Color(0x006666)//青色
    const color2 = new THREE.Color(0xffff00)//黄色
    for(let i = 0;i < 10;i++){
        // 前八个点由青色渐变为黄色，后两个点由黄色渐变为青色
        if(i<8){
            const color = color1.clone().lerp(color2, i / 8);
            colorArr.push(color.r,color.g,color.b)
        }else{
            const color = color2.clone().lerp(color1, (i-8) / 2);
            colorArr.push(color.r,color.g,color.b)
        }
    }
    geometry2.setColors(colorArr);
    const material2 = new LineMaterial({
        // color: 0xffffff,
        vertexColors: true,
        linewidth: 3.0, // 设置线宽
        });
    //材质输入Three.js渲染canvas画布的宽高度
    material2.resolution.set(window.innerWidth, window.innerHeight);
    // 飞线
    function render (){
        if(index+num >= pointsArr.length){
            index = 0
        }
        index++
        flyLineArr =  pointsArr.slice(index,index+num)
        pointArr = []
        flyLineArr.forEach(function (v3) {
            pointArr.push(v3.x, v3.y, v3.z)
          })
        geometry2.setPositions(pointArr);
        requestAnimationFrame(render);
    }
    render()
    // 线模型
    const flyLine = new Line2(geometry2, material2);
    return [line,flyLine]
}


export {model};